<template>
  <div class="left-qyzcz">
    <div class="tab-title" :class="isHall?'tab-title1':''">
      <span class="dec">塘栖枇杷加工企业近年总产值</span>
      <span class="unit">(万元)</span>
    </div>
    <div class="tab-content" @click="showMask">
      <div ref="myChart" :style="{height:isHall? '190px':'180px', width: '100%'}"></div>
    </div>
    <div class="mask-detail"  v-if="show">
        <totalMask @closeMask="closeMask" :yearList="yearList" :defaultYear="defaultYear" />
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import SelectYear from '../SelectYear.vue'
import totalMask from './totalMask.vue'
import {queryPlanProductionByeardp} from '@/api/dashboards'
export default {
    components:{SelectYear,totalMask},
    props:{
        canShow1:{
            type:Boolean
        },
        canShow2:{
            type:Boolean
        },
        isHall:{
            type:Number
        }
    },
    data(){
        return{
            defaultYear:undefined,
            yearList:[],
            chartData:[],
            show:false,
            config :{
                align: ['center', 'center', 'center'],
                waitTime: 3000,
                headerHeight: 28,
                index: true,
                columnWidth: [60, 78, 118,95],
                rowNum: 4,
                indexHeader:'排名',
                header: ['品类', '产值 (万元)','占比 (%)'],
                headerBGC: 'rgba(255, 255, 255, 0.04)',
                oddRowBGC: ' rgba(255, 255, 255, 0.04)',
                evenRowBGC: 'rgba(0, 255, 203, 0)',
                data: [
                ['行1列1', '行1列2', '行1列3'],
                ['行2列1', '行2列2', '行2列3'],
                ['行3列1', '行3列2', '行3列3'],
                ['行4列1', '行4列2', '行4列3'],
                ['行5列1', '行5列2', '行5列3'],
                ['行5列1', '行5列2', '行5列3'],
            ],
            }
        }
    },
    watch: {
        canShow1:{
            immediate: true,
            handler: function(val) {
                if(val){
                    this.show = false
                }
            }
        },
        canShow2:{
            immediate: true,
            handler: function(val) {
                if(val){
                    this.show = false
                }
            }
        },
        isHall:{
            immediate: true,
            handler: function(val) {
                if(val){
                }
            }
        },
    },
    created(){
        this.getDate()
    },
    mounted() {
        this.queryPlanProductionByeardp()
    },
    methods: {
        async queryPlanProductionByeardp() {
            let res = await queryPlanProductionByeardp()
            let chartData = res.result&&res.result.length&&res.result
            if(chartData.length>5){
                this.chartData = chartData.slice(0,5)
            }else{
                this.chartData = chartData
            }
            this.chartData=this.chartData.sort(this.compare("year",true))
            this.initChart()
            this.chartData.map(item=>{
                const obj = {}
                obj.label = item.year
                obj.value = item.year
                this.yearList.push(obj)
            })
             this.$emit('getOutputYear',this.yearList)
        },
        compare(property,desc) {
            return (a, b)=> {
                var value1 = a[property];
                var value2 = b[property];
                if(desc==true){
                    // 升序排列
                    return value1 - value2;
                }else{
                    // 降序排列
                    return value2 - value1;
                }
            }
        },
        showMask(){
            if(this.isHall){
                return
            }else{
                this.show = true
                this.$emit('getShow',this.show)
            }
        },
        getDate(date) {
            this.selectYear = date
        },
        closeMask(){
            this.show = false
        },
        initChart() {
            var result = Math.max(...this.chartData.map(x => x.production));
            var maxData =[]
            this.chartData.map(i=>{
                maxData.push(result)
            })
            var xData = [],
            yData = [];
            var min = 50;
            this.chartData.map(function (a, b) {
            xData.push(a.year);
            if (a.value === 0) {
                yData.push(a.production + min);
            } else {
                yData.push(a.production);
            }
            });
            let myChart = echarts.init(this.$refs.myChart)
            var option = {
            tooltip: {
            show:false
            },
            legend: {
                show: false
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '7%',
                top: '7%',
                containLabel: true,
            },
            xAxis: [
                {
                type: 'category',
                gridIndex: 0,
                data: xData,
                axisTick: {
                    show:false,
                    alignWithLabel: false
                },
                axisLine: {
                    lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisLabel: {
                    show: true,
                    color: 'rgba(255, 255, 255, 0.6)',
                    fontSize: 12
                }
                },
            ],
            yAxis: [
                {
                type: 'value',
                splitNumber:3,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisLabel: { //保留一位小数
                    color: 'rgba(255, 255, 255, 0.6)',
                //   formatter: function (value, index) { 
                //       console.log(value);          
                //       return value.toFixed(1);      
                //      }                
            }
                },
                {
                type: 'value',
                splitNumber:3,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisLabel: { //保留一位小数
                    color: 'rgba(255, 255, 255, 0.6)',
                //   formatter: function (value, index) { 
                //       console.log(value);          
                //       return value.toFixed(1);      
                //      }                
            }
                },
            ],
            series: [
                {
                name: '合格率',
                type: 'bar',
                barWidth: '15',
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                        offset: 0,
                        color: '#04E9B0'
                        },
                        {
                        offset: 0.1,
                        color: '#04E9B0'
                        },
                        {
                        offset: 1,
                        color: '#0066FF'
                        }
                    ])
                    }
                },
                data: yData,
                zlevel: 11
                },
                {
                name: '背景',
                type: 'bar',
                barWidth: '15',
                xAxisIndex: 0,
                yAxisIndex: 0,
                barGap: '-100%',
                data: maxData,
                itemStyle: {
                    normal: {
                    color: 'rgba(255,255,255,0.1)',
                    barBorderRadius: 30
                    }
                },
                zlevel: 9
                }
            ]
            }
        myChart.setOption(option)
        myChart.off('click'); //防止触发两次点击事件
        myChart.getZr().on('click', (params) => {
            let pointInPixel = [params.offsetX, params.offsetY];
            if (myChart.containPixel('grid', pointInPixel)) {
                let pointInGrid = myChart.convertFromPixel({
                    seriesIndex: 0
                }, pointInPixel);
                let xIndex = pointInGrid[0]; //索引
                let handleIndex = Number(xIndex);
                // let seriesObj = myChart.getOption(); //图表object对象
                var op = myChart.getOption();
                //获得图表中点击的列
                var year = op.xAxis[0].data[handleIndex];  //获取点击的列名
                this.defaultYear = year
            };
        })
        },
    },
}
</script>
<style lang="less" scoped>
.left-qyzcz {
  width: 360px;
  height: 200px;
  color: #fff;
  .tab-title1{
    padding: 24px 10px 0 24px !important;
  }
  .tab-title {
      padding: 10px 10px 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
    .unit{
        padding-right: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }
   
  }
  .tab-content {
    width: 360px;
    position: relative;
  
  }
    .mask-detail{
        width: 360px;
        height: 374px;
        background: rgba(11, 17, 51, 0.85);
        position: relative;
        top: -108%;
        left: 105%;
        z-index: 1000;
    }
}
</style>